import React from 'react'
import {Icon , Tooltip, Menu, Dropdown,Button} from 'antd'
import StateMixin from 'reflux-state-mixin';
import SrvListStore from 'pages/servicelist/stores/serviceListStore.js'


const SubMenu = Menu.SubMenu;
let dropstate = false;

export default React.createClass({
  mixins: [StateMixin.connect(SrvListStore)],
  menuClick(e) {
    this.props.showModal2(e);
  },
  handleClick(e) {
    if (dropstate === true) {
      this.props.changeSelectState(this.props.currentSelected,this.props.openKeys)
    } else {
      let open = e.open ? e.keyPath : e.keyPath.slice(1);
      this.props.changeSelectState(e.key,open)
      this.props.changeSrvCat(e.key);
      this.setState({
        srvCatTreeId:e.key
      })
    }
    dropstate = false;
  },
  handleOpen(e) {
    if (dropstate === true) {
      this.props.changeSelectState(this.props.currentSelected,this.props.openKeys)
    } else {
      this.props.changeSelectState(e.key,e.openKeys);
      this.props.changeSrvCat(e.key);
    }
    dropstate = false;
  },
  handleClose(e) {
    if (dropstate === true) {
      this.props.changeSelectState(this.props.currentSelected,this.props.openKeys)
    } else {
      //let open = e.open ? e.keyPath : e.keyPath.slice(1);
      this.props.changeSelectState(e.key,e.openKeys);
      this.props.changeSrvCat(e.key);
    }
    dropstate = false;
  },
  renderMenu(subMenu) {
    return (
         <Dropdown  style={{float:"right"}} overlay={
          <Menu className="dropdown-menu" onClick={(e)=>this.menuClick(e)}>
            <Menu.Item key={'creat/' + subMenu.id}><div>
            新建
            </div></Menu.Item>
            <Menu.Item key={'del/' + subMenu.id + "/" + subMenu.parentId}><div>
            删除
            </div></Menu.Item>
          </Menu>
        } trigger={['click']} onClick={()=>{ dropstate = true;}}>
          <Icon type="setting" style={{right:20,position:'absolute'}}/></Dropdown>
    )
  },
  generateMenu (data) {
    let menuDom = [];
    if (data instanceof Array) {
      _.map(data , (item) => {
        menuDom.push(this.generateMenu(item));
      })
    } else {
      if (data.children) {
        menuDom.push(
          <SubMenu key={data.id} title={
            <Tooltip title={data.title} mouseEnterDelay={1}>
            <p>
              <span>
                {
                  data.title
                }
                </span>
              { this.renderMenu(data) }
            </p>
            </Tooltip>
          }>
          {this.generateMenu(data.children)}
          </SubMenu>
        )
      } else {
        menuDom.push(
          <Menu.Item key={data.id}>
            <Tooltip title={data.title} mouseEnterDelay={1}>
              <p>
                {
                  data.title
                }
                { this.renderMenu(data) }
              </p>
            </Tooltip>
          </Menu.Item>
        )
      }
    }
    return menuDom;
  },
  render() {
    return (
      <div className="inner-menu">
        <Tooltip title="新建目录" className="group-button">
          <Button type="ghost" className="group-button" icon="plus" onClick={this.props.showModal}>
            新建服务目录</Button>
        </Tooltip>

        <Menu onClick={this.handleClick}
          className="org-menu"
          openKeys={this.props.openKeys}
          selectedKeys={[this.props.currentSelected]}
          mode="inline"
          inlineIndent = {12}
          onOpen={this.handleOpen}
          onClose={this.handleClose}
        >
          {this.generateMenu(this.state.srvTree)}
        </Menu>

      </div>
    );
  }
})
